<template>
    <div class="subpage ear-detail-container">
        <ul class="ear-detail-top">
            <li>
                <div class="ear-detail-top-left">
                    <img src="@/assets/img/home_img25.png" alt="">
                    <span>耳标号</span>
                </div>
                <span>ID{{detail.cattleIdCard}}</span>
            </li>
            <li>
                <div class="ear-detail-top-left">
                    <img src="@/assets/img/home_img26.png" alt="">
                    <span>月龄</span>
                </div>
                <span>{{detail.ageMonth}}月</span>
            </li>
        </ul>
        <div class="empty-div"></div>
        <div class="ear-detail-bottom">
            <div v-if="detail.recordCount">
				<p class="resale-title">转售记录</p>
				<ul class="resale-list">
				    <li>
				        <span>转售记录</span>
				        <span>{{detail.recordCount}}次</span>
				    </li>
				    <li>
				        <span>转售时间</span>
				        <span>{{detail.resaleTime}}</span>
				    </li>
				    <li>
				        <span>整牛单价</span>
				        <span>{{detail.totalPrice}}{{detail.totalPriceUnit}}</span>
				    </li>
				</ul>
			</div>
            <div class="resale-img">
                <img :src="detail.pic" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
           detail: {}
        }
    },
    created() {
        console.log(this.$route.params.id)
        console.log(this.$route.params.type)
		this.getDetail()
    },
    methods: {
        getDetail() {
            let url = '';
            switch(this.$route.params.type) { //type 耳标详情跳转 1：商品 2：采购订单
                case '1':
                    url = '/api/product/cattle_detail/';
                    break;
                case '2':
                    url = '/api/order/cattle_detail/';
                    break;
            }
            this.$api.get(url + this.$route.params.id)
                .then((res) => {
					console.log(res)
                    this.detail = res.data;
                })
        }
    }
}
</script>

<style lang="scss" scoped>
    .ear-detail-container {
        background-color: #fff;
        .ear-detail-top {
            width: 100%;
            padding: 0 24px;
            box-sizing: border-box;
            background-color: #fff;
            li {
                width: 100%;
                padding: 12px 0;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                color: #344047;
                &:first-child {
                    border-bottom: 1px solid #f2f2f2;
                }
                .ear-detail-top-left {
                    display: flex;
                    align-items: center;
                    img {
                        width: 36px;
                        height: 36px;
                        object-fit: cover;
                        margin-right: 20px;
                    }
                }
            }
        }
        .empty-div {
            width: 100%;
            height: 10px;
            background-color: #f8f8f8;
        }
        .ear-detail-bottom {
            width: 100%;
            padding: 16px 24px 0;
            box-sizing: border-box;
            background-color: #fff;
            .resale-title {
                padding-bottom: 6px;
                font-size: 16px;
                color: #344047;
            }
            .resale-list {
                width: 100%;
                li {
                    width: 100%;
                    padding: 16px 0;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #f2f2f2;
                    span {
                        &:first-child {
                            display: block;
                            width: 88px;
                        }
                        &:last-child {
                            flex: 1;
                        }
                    }
                }
            }
        }
        .resale-img {
            width: 100%;
            padding: 16px 0;
            box-sizing: border-box;
            img {
                width: 100%;
                height: 245px;
                object-fit: cover;
				border-radius: 14px;
            }
        }
    }
</style>